<template>
  <section class="content-view wrapper">
    <div class="local-region">
      <loading v-model="show1" spin-size="40px" spin-color="#ccc"/>
      <loading v-model="show2" spin-size="40px" spin-color="#ccc" no-wrap/>
      <loading v-model="show3" :svg-src="svgSrc" spin-size="100%"/>
      <loading v-model="show4" :svg-src="svgSrc" spin-size="100%" no-wrap/>
    </div>

    <h2 class="item-title">标签用法 (通常在局部显示时使用)</h2>
    <h-button class="button-class" type="rimless" shadow @click.native="showLoading1">Loading</h-button>
    <h-button class="button-class purple" shadow @click.native="showLoading2">Loading (无包裹层)</h-button>
    <h-button class="button-class" type="rimless" shadow @click.native="showLoading3">Loading (SVG)</h-button>
    <h-button class="button-class purple" shadow @click.native="showLoading4">Loading (SVG 无包裹层)</h-button>

    <h2 class="item-title">插件用法</h2>
    <h-button class="button-class" type="rimless" shadow @click.native="handleLoading">LoadingPlugin</h-button>
  </section>
</template>

<script>
import Vue from 'vue'
import { HButton, Loading, LoadingPlugin } from 'hippius'

import svg from '@/assets/images/loading/rolling.svg'

Vue.use(LoadingPlugin)

export default {
  components: {
    HButton,
    Loading,
  },
  data () {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      svgSrc: svg,
    }
  },
  methods: {
    // 标签用法
    showLoading1 () {
      if (this.show1) return
      this.show1 = true
      setTimeout(() => {
        this.hideLoading1()
      }, 2000)
    },
    hideLoading1 () {
      this.show1 = false
    },
    showLoading2 () {
      if (this.show2) return
      this.show2 = true
      setTimeout(() => {
        this.hideLoading2()
      }, 2000)
    },
    hideLoading2 () {
      this.show2 = false
    },
    showLoading3 () {
      if (this.show3) return
      this.show3 = true
      setTimeout(() => {
        this.hideLoading3()
      }, 2000)
    },
    hideLoading3 () {
      this.show3 = false
    },
    showLoading4 () {
      if (this.show4) return
      this.show4 = true
      setTimeout(() => {
        this.hideLoading4()
      }, 2000)
    },
    hideLoading4 () {
      this.show4 = false
    },
    // 插件用法
    showLoading5 (ops = {}) {
      this.$loading.show({
        noWrap: ops.noWrap,
        spinSize: ops.spinSize,
        spinColor: ops.spinColor,
        svgSrc: ops.svgSrc,
        onShow: ops.onShow,
        onHide: ops.onHide,
      })
    },
    hideLoading5 () {
      this.$loading.hide()
    },
    handleLoading () {
      this.showLoading5({
        noWrap: false,
        // spinSize: '100%',
        // spinColor: '#ccc',
        // svgSrc: svg,
        onShow: () => {
          console.log('on-show')
          setTimeout(() => {
            this.hideLoading5()
          }, 2000)
        },
        onHide: () => {
          console.log('on-hide')
        },
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.wrapper {
  padding: 20px 6%;

  .button-class {
    width: 95%;
    margin: 6px 2.5%;
    font-size: 14px;
    color: cadetblue;
    border-radius: 3px;
  }

  .purple {
    color: #fff;
    background-color: #7e57c2;
    border: 1px solid #7e57c2;
  }

  .local-region {
    position: relative;
    height: 200px;
    background-color: #eee;
  }
}
</style>
